<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./zc.css">
    <script src="./js/jquery.min.js"></script>
    <link rel="stylesheet" href="./font/iconfont.css">
    
</head>
<body>
    <div class="zc">
      <div class="head">
       <div class="common">
          <ul class="head-nav1">
              <li>
                <a href="dl.html" class="h">亲，请登录</a>
                <a href="zc.html">免费注册</a>
              </li>
              <li><a href="" style="padding:0 7px ;">手机逛淘宝</a></li>
             
              <li><a href="">网页无障碍</a></li>
          </ul>
          <ul class="head-nav2">
              <li><a href="">淘宝网首页</a>
                
              </li>
              <li><a href=""  style="padding: 0 6px;">我的淘宝<span class="iconfont">&#xe79a;</span></a>
                <ol><li><a href="">已买到的宝贝</a></li>
                    <li><a href="">我的足迹</a></li>
                </ol>
              </li>
              <li><a href=""><i class="h"><span class="iconfont">&#xe70c;</span></i> 购物车</a></li>
              <li><a href=""><span class="iconfont">&#xe8c6;</span>收藏夹<span class="iconfont">&#xe79a;</span></a>
              <ol>
                <li><a href="">收藏的宝贝</a></li>
                <li><a href="">收藏的店铺</a></li>
              </ol></li>
              <li><a href="">商品分类</a></li>
              <li><a href="">免费开店</a></li>
              <li><a href="">千牛卖家中心<span class="iconfont">&#xe79a;</span></a>
                <ol>
                  <li><a href="">开店入驻</a></li>
                  <li><a href="">已卖出的宝贝</a></li>
                  <li><a href="">出售中的宝贝</a></li>
                  <li><a href="">卖家服务市场</a></li>
                  <li><a href="">卖家培训中心</a></li>
                  <li><a href="">体检中心</a></li>
                  <li><a href="">电商学习中心</a></li>
                </ol>
              </li>
              <li><a href="">联系客服<span class="iconfont">&#xe79a;</span></a>
              <ol>
                <li><a href="">消费者客服</a></li>
                <li><a href="">卖家客服</a></li>
              </ol>
              </li>
          </ul>

        
       </div>
     </div>
      <div class="login">
        <div class="logo">
          
          <a href="" class="tblogo"></a>
          <h1>用户注册</h1>
        </div>
      </div>
      <div class="kong"></div>
      <div class="zcpage">
        <form action="">
          <table>
              <tr>
                  <td>用户名：</td>
                  <td><input type="text" name="username" placeholder="请输入用户名"></td>
              </tr>
              <tr>
                  <td>密码：</td>
                  <td><input type="password" name="password" placeholder="请输入密码"></td>
              </tr>
              <tr>
                  <td>确认密码：</td>
                  <td><input type="password" name="repass"placeholder="请确认密码"> </td>
              </tr>
              <tr>
                <td>昵称：</td>
                <td><input type="text" name="nickname" placeholder="请输入昵称"> </td>
            </tr> 
              <tr>
                  <td ></td>
                  <td>
                      <input type="submit" value="注册" class="s" >
                  </td>
              </tr>
          </table>
      </form>
      </div>
      <div class="fotter">
        <ul>
          <li><a href="//page.1688.com/shtml/about/ali_group1.shtml">阿里巴巴集团</a></li>
          <li>|</li>
          <li><a href="//www.alibaba.com">阿里巴巴国际站</a></li>
          <li>|</li>
          <li><a href="//www.1688.com">阿里巴巴中国站</a></li>
          <li>|</li>
          <li><a href="//www.aliexpress.com">全球速卖通</a></li>
          <li>|</li>
          <li><a href="//www.taobao.com">淘宝网</a></li>
          <li>|</li>
          <li><a href="//www.tmall.com">天猫</a></li>
          <li>|</li>
          <li><a href="//ju.taobao.com">聚划算</a></li>
          <li>|</li>
          <li><a href="//www.etao.com">一淘</a></li>
          <li>|</li>
          <li><a href="//www.alimama.com">阿里妈妈</a></li>
          <li>|</li>
          <li><a href="//www.aliyun.com">阿里云计算</a></li>
          <li>|</li>
          <li><a href="//www.yunos.com">云OS</a></li>
          <li>|</li>
          <li><a href="//wanwang.aliyun.com">万网</a></li>
          <li>|</li>
          <li><a href="//www.alipay.com">支付宝</a></li>
          <li>|</li>
        </ul>
        <ol>
          <li><a href="//huodong.taobao.com/wow/tbhome/act/about-home">关于淘宝</a></li>
          <li><a href="//www.taobao.com/about/partners.php">合作伙伴</a></li>
          <li><a href="//pro.taobao.com">营销中心</a></li>
          <li><a href="//service.taobao.com/support/main/service_route.htm">联系客服</a></li>
          <li><a href="//open.taobao.com">开放平台</a></li>
          <li><a href="//www.taobao.com/about/join.php">诚征英才</a></li>
          <li><a href="//consumerservice.taobao.com/contact-us">联系我们</a></li>
          <li><a href="//www.taobao.com/sitemap.php">网站地图</a></li>
          <li><a href="//terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201703241622_61002.html">法律声明及隐私权政策</a></li>
          <li class="last">© 2022 Taobao.com 版权所有</li>
        </ol>
        <ol class="lastul">
          <li>网络文化经营许可证：
            <a href="//img.alicdn.com/tps/i4/T1ysdvXtNeXXcPpEkQ-972-636.jpg">文网文[2010]040号</a>
          </li>
          <li>|</li>
          <li>增值电信业务经营许可证：浙B2-20080224-1</li>
          <li>|</li>
          <li>信息网络传播视听节目许可证：1109364号</li>
        </ol>
            
      </div>
    </div>
   
</body>
 </html>
<script src="./js/utils.js"></script>
<script>
  var form = document.querySelector('form');
  var username = document.querySelector('[name="username"]');
  var password = document.querySelector('[name="password"]');
  var repass = document.querySelector('[name="repass"]');
  var nickname = document.querySelector('[name="nickname"]');
  form.addEventListener('submit', submit)
  function submit() {
      window.event.returnValue = false
      var xhr = new XMLHttpRequest()
      xhr.open('post', 'http://localhost:8888/users/register')
      xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
      var params = `username=${username.value}&password=${password.value}&rpassword=${repass.value}&nickname=${nickname.value}`
      xhr.send(params)
      xhr.onreadystatechange = function() {
          if(xhr.readyState === 4) {
              if(xhr.status>=200 && xhr.status<300) {
                  var res = xhr.responseText
                  res = JSON.parse(res)
                  // console.log(res);
                  var {message, code} = res
                  if(code === 1) {
                      alert(message)
                      location.href = 'dl.html'
                  } else {
                      alert(message)
                  }
              }
          }
      }
  }
  </script>
</script>